<template>
    <div>
        <div class="headstyle">
            <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                <span class="locsty"><i class="el-icon-location iconsty"></i>当前位置：导师课堂材料</span>
                </div>
            </el-col>
            <el-col :span="14">  
                <div class="grid-content bg-purple">             
                    <el-input  v-model="te_number" placeholder="请输入导师工号" clearable></el-input>                                
                    <el-input  v-model="st_info" placeholder="请输入学生姓名或手机号" clearable></el-input>
                    <el-select v-model="Pt_flag" placeholder="请选择审核状态" class="selectsty">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option label="已通过" value="1"></el-option>
                        <el-option label="未通过" value="2"></el-option>
                        <el-option label="待审核" value="0"></el-option>               
                    </el-select>
                    <el-button type="primary" @click="selectMaterials">查询</el-button>
                </div>
            </el-col>           
            </el-row>
        </div>
        <div class="contentstyle">
             <el-table ref="multipleTable"  :data="tableData.filter(data=>total!=0)"  
                 tooltip-effect="dark" 
                 style="width: 100%;text-align:center"
                 border @selection-change="handleSelectionChange"
                 @row-click="OpenPic">
                <el-table-column type="selection"  width="55" align="center"></el-table-column>
                <el-table-column  prop="rownum" label="序号" width="100" align="center"> </el-table-column>
                <el-table-column  prop="pt_thname" label="导师姓名" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="pt_thnumber" label="导师工号" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="Dt_Name" label="培训期数" show-overflow-tooltip align="center"> </el-table-column>               
                <el-table-column  prop="Pt_Name" label="材料" show-overflow-tooltip align="center"></el-table-column>  
                <el-table-column  prop="Pt_Time" label="上传时间" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="Pt_Flag" label="审核状态" show-overflow-tooltip align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.Pt_Flag===0" style="color: blue">待审核</span>
                    <span v-else-if="scope.row.Pt_Flag===1" style="color: green">已通过</span>
                    <span v-else style="color: red">未通过</span>
                  </template>  
                </el-table-column>             
            </el-table>
            <el-pagination
                    v-if = "paginationShow"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </div>
        <div class="bulitContent" v-show="optionflag">
            <div class="bulitBg"></div>
            <div class="bulitContentDetail">
                <p class="bulitTitle">
                    <span id="titleid">{{datas.Pt_Name}}</span>
                    <i class="el-icon-close closesty" @click="optionend"></i> 
                </p>                
                <div class="demo-image__preview openimg">
                    <el-image 
                        style="width: 300px; height: 300px"                          
                        :src="datas.Pt_Url"
                        :preview-src-list="srcList">
                    </el-image>
                </div>                                                             
                <div class="bulitItem">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入审核意见"
                      v-model="textarea" class="textareasty"
                      :disabled="inputflag">
                    </el-input>
                    <div class="btnsty" v-show="authflag">
                      <el-button type="primary" plain @click="BtnAgree(datas)">通过</el-button>
                      <el-button type="danger" plain @click="BtnRefuse(datas)">不通过</el-button>
                    </div>
                </div>
            </div>          
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [], //图片信息
      srcList: [],
      te_number: "",
      st_info: "",
      Pt_flag: "",
      pageSize: 10, // 页容量
      currentPage: 1, // 当前页
      total: 0, // 数据的总条数
      paginationShow: true, // 控制分页的显示隐藏达到刷新的效果
      sels: [], //选中显示的值
      disabled: true,
      textarea: "",
      //课堂材料数据
      tableData: [
        {
          Pt_Id: "",
          rownum: "",
          pt_thnumber: "",
          pt_thname: "",
          Dt_Name: "",
          Pt_Name: "",
          Pt_Url: "",
          Pt_Flag: "",
          Pt_Text: "",
          St_Phone: "",
          Pt_Time: ""
        }
      ],
      search: "",
      authflag: true,
      optionflag: false,
      inputflag: false
    };
  },
  //页面初次加载
  mounted: function() {
    this.selectMaterials();
    this.loadauth();
  },
  methods: {
    loadauth() {
      if (this.$store.state.teacherinfo == null) {
        this.$message({
          type: "info",
          message: "登录失效，请重新登录!"
        });
        this.$router.push("/login");
      } else {
        var teacher = JSON.parse(this.$store.state.teacherinfo);
        if (teacher.Te_isadmin == 2) {
          this.authflag = false;
          this.inputflag = true;
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.sels = val;
    },
    //点击链接跳转
    goTo(path) {
      this.$router.replace(path);
    },

    // 当页容量发生变化时触发
    sizeChange(size) {
      this.pageSize = size;
      // 重新请求数据
      this.selectMaterials();
    },
    // 当页数发生变化时触发
    currentChange(num) {
      this.currentPage = num;
      // 重新请求数据
      this.selectMaterials();
    },
    // 查询方法
    searchClicks() {
      this.paginationShow = false;
      this.currentChange(1);
      this.$nextTick(() => {
        this.paginationShow = true;
        this.selectMaterials();
      });
    },
    //课程查询方法
    selectMaterials() {
      var ptflag = "";
      if (this.Pt_flag == "") {
        ptflag = -1;
      } else {
        ptflag = this.Pt_flag;
      }
      this.$axios
        .get("/Picture/V5", {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            thnumber: this.te_number,
            ptflag: ptflag,
            st_info: this.st_info
          }
        })
        .then(json => {
          if (json.data == "logout") {
            this.$message({
              type: "info",
              message: "您的登录信息已失效，请重新登录！"
            });
            this.$router.push("/login");
          } else {
            var materlist = JSON.parse(json.data.materlist);
            this.total = json.data.totalpage;
            var materlistdata = [];
            for (let i = 0; i < materlist.length; i++) {
              var item = {
                Pt_Id: materlist[i].Pt_Id,
                rownum: i + 1,
                pt_thnumber: materlist[i].Te_Number,
                pt_thname: materlist[i].Te_name,
                Dt_Name: materlist[i].Dt_Name,
                Pt_Name: materlist[i].Pt_Name,
                Pt_Url: this.$store.state.respath+materlist[i].Pt_Url,
                //Pt_Url:
               //   "http://222.190.113.220:8087/upload/teacher/545c4ebd-5c20-463d-8783-ccd63e9b9b27.jpg",
                Pt_Flag: materlist[i].Pt_Flag,
                Pt_Text: materlist[i].Pt_Text,
                St_Phone: materlist[i].St_Phone,
                Pt_Time: materlist[i].Pt_Time
              };
              materlistdata[i] = item;
            }
            this.tableData = materlistdata;
          }
        });
    },

    OpenPic(row, column, event) {
      this.datas = row;
      this.srcList = [this.datas.Pt_Url];
      this.textarea = this.datas.Pt_Text;
      this.optionflag = true;
    },
    optionend() {
      this.optionflag = false;
      this.textarea = "";
      this.srcList = [];
      this.selectMaterials();
    },
    BtnAgree(row) {
       var list = {
          Te_name: row.pt_thname,
          Te_Number: row.pt_thnumber,
          Dt_Name: row.Dt_Name,
          Pt_Name: row.Pt_Name,
          Pt_Flag: 1,
          Pt_Text: this.textarea
        };
        this.$axios
          .put("/Picture/" + row.Pt_Id + "/V6", list)
          .then(Jsondata => {
            if (Jsondata.data == "操作完成") {
              alert(Jsondata.data);
              // this.$message({
              //   type: "success",
              //   message: Jsondata.data
              // });
            } else {
              alert(Jsondata.data);
              // this.$message({
              //   type: "info",
              //   message: Jsondata.data
              // });
            }
          })
          .catch(error => {});
    },
    BtnRefuse(row) {
      if (this.textarea == "" || this.textarea==null) {
        alert("不通过请填写审批意见!");
        // this.$message({
        //   type: "error",
        //   message: "不通过请填写审批意见"
        // });
      } else {
        var list = {
          Te_name: row.pt_thname,
          Te_Number: row.pt_thnumber,
          Dt_Name: row.Dt_Name,
          Pt_Name: row.Pt_Name,
          Pt_Flag: 2,
          Pt_Text: this.textarea
        };
        this.$axios
          .put("/Picture/" + row.Pt_Id + "/V6", list)
          .then(Jsondata => {
            if (Jsondata.data == "操作完成") {
              alert(Jsondata.data);
              // this.$message({
              //   type: "success",
              //   message: Jsondata.data
              // });
            } else {
              alert(Jsondata.data);
              // this.$message({
              //   type: "info",
              //   message: Jsondata.data
              // });
            }
          })
          .catch(error => {});
      }
    }
  },
  computed: {
    totalNum() {
      return this.total;
    }
  },
  watch: {
    // 监听总条数,每次查询将当前页置为 1
    totalNum(val) {
      if (val == (this.currentPage - 1) * this.pageSize && val != 0) {
        this.currentPage -= 1;
        this.selectMaterials(this);
      }
    }
  }
};
</script>


<style scoped>
.closesty {
  float: right;
  font-size: 27px;
  line-height: 40px;
}
.locsty {
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.editsty {
  padding: 3px;
  font-size: large;
}
.iconsty {
  color: #53b9fe;
  font-size: 22px;
}
.headstyle {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.contentstyle {
  text-align: center;
  width: 90%;
  padding: 40px;
}
.el-input {
  width: 200px;
}
/* 点击新建按钮弹框 */
.bulitContent {
  /* display: none; */
  position: fixed;
  top: 15%;
  bottom: 0;
  width: 65%;
  z-index: 10000;
}
.bulitBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-color:#d9d9d9; */
  background-color: #7f7f7f;
  /* rgba(217,217,217,0.x) */
  z-index: -10;
  opacity: 0.5;
}
.bulitContentDetail {
  background: #fff;
  width: 500px;
  height: 525px;
  margin: 0 auto;
  margin-top: 20px;
}
.bulitTitle {
  height: 40px;
  background: #e1e5f4;
  line-height: 40px;
  font-size: 17px;
  color: gray;
  padding-left: 15px;
  letter-spacing: 1px;
}
/* .bulitItem {
  text-align: center;
} */
.bulitItem select {
  width: 190px;
  height: 30px;
}

.bulitItem {
  padding: 15px;
}

.openimg {
  padding: 10px;
  text-align: center;
}

.btnsty {
  text-align: center;
  padding-top: 20px;
}
.el-textarea.is-disabled .el-textarea__inner{
  color: black;
}
</style>
